<template>
  <common-page title="重置密码">
    <el-steps
      :active="stepActive"
      simple
      finish-status="success"
    >
      <el-step title="填写新密码" />
      <el-step title="完成重置" />
    </el-steps>
    <el-form
      v-if="stepActive==0"
      ref="form"
      :model="form"
      :rules="rules"
      :label-width="120"
    >
      <el-form-item
        label="登录账号"
        prop="user"
      >
        <el-input
          v-model="form.user"
          placeholder="请输入登录账号"
        />
        <div class="el-form-item-msg">
          请输入注册时填写的登录账号
        </div>
      </el-form-item>
      <el-form-item
        label="手机号码"
        prop="phone"
      >
        <el-input
          v-model="form.phone"
          placeholder="请输入手机号码"
        />
      </el-form-item>
      <el-form-item
        label="短信验证码"
        prop="yzm"
      >
        <div class="yzm">
          <el-input
            v-model="form.yzm"
            placeholder="请输入6位短信验证码"
          />
          <el-button
            :disabled="disabled"
            @click="getYzm"
          >
            获取验证码<span v-if="disabled"> ({{ time }})</span>
          </el-button>
        </div>
      </el-form-item>
      <el-form-item
        label="新密码"
        prop="newpw"
      >
        <el-input
          v-model="form.newpw"
          show-password
          placeholder="请输入新密码"
        />
        <div class="el-form-item-msg">
          请输入包含英文、数字的8位以上密码
        </div>
      </el-form-item>
      <el-form-item
        label="确认新密码"
        prop="newpw2"
      >
        <el-input
          v-model="form.newpw2"
          show-password
          placeholder="请再一次输入新密码"
        />
      </el-form-item>

      <el-form-item>
        <el-button
          type="primary"
          @click="save"
        >
          提交
        </el-button>
      </el-form-item>
    </el-form>
    <el-result
      v-if="stepActive==1"
      icon="success"
      title="密码重置成功"
      sub-title="请牢记自己的新密码,返回登录后使用新密码登录"
    >
      <template #extra>
        <el-button
          type="primary"
          @click="backLogin"
        >
          返回登录
        </el-button>
      </template>
    </el-result>
  </common-page>
</template>

<script>
import commonPage from './components/commonPage'

export default {
  components: {
    commonPage
  },
  data() {
    return {
      stepActive: 0,
      form: {
        user: "",
        phone: "",
        yzm: "",
        newpw: "",
        newpw2: ""
      },
      rules: {
        user: [
          { required: true, message: '请输入登录账号'}
        ],
        phone: [
          { required: true, message: '请输入手机号'}
        ],
        yzm: [
          { required: true, message: '请输入短信验证码'}
        ],
        newpw: [
          { required: true, message: '请输入新的密码'}
        ],
        newpw2: [
          { required: true, message: '请再次输入新的密码'},
          {validator: (rule, value, callback) => {
            if (value !== this.form.newpw) {
              callback(new Error('两次输入密码不一致'));
            }else{
              callback();
            }
          }}
        ],
      },
      disabled: false,
      time: 0
    }
  },
  mounted() {

  },
  methods: {
    async getYzm(){
      var validate = await this.$refs.form.validateField("phone").catch(()=>{})
      if(!validate){ return false }

      this.$message.success("已发送短信至手机号码")
      this.disabled = true
      this.time = 60
      var t = setInterval(() => {
        this.time -= 1
        if(this.time < 1){
          clearInterval(t)
          this.disabled = false
          this.time = 0
        }
      },1000)
    },
    async save(){
      var validate = await this.$refs.form.validate().catch(()=>{})
      if(!validate){ return false }

      this.stepActive = 1
    },
    backLogin(){
      this.$router.push({
        path: '/login'
      })
    }
  }
}
</script>

<style scoped>


</style>
